<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="js/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootoast.css">
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="js/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/bootoast.js"></script>
    <style>
        .form-group{
            margin: 25px 0px;
        }
        .btn{
            margin-right: 30px;
        }
    </style>
    <script>
        $(function(){

            //加载所有的图书类型
            $.ajax({
                url:'find_types',
                type:'get',
                cache:false,
                data: {

                },
                dataType:'json',
                success:function (rst) {
                    $('#bookType').empty();
                    $(`<option value="-1">请选择类型</option>`).appendTo('#bookType');
                    if(rst.code==1){
                        for(let i=0;i<rst.data.length;i++){
                            var t = rst.data[i];
                            $(`<option value="${t.typeId}">${t.typeName}</option>`).appendTo('#bookType');
                        }
                    }
                }
            });

            $('#btnAdd').click(function(){
                if(!vaildInput()){//不正确
                    return;
                }
                //添加数据  正确
                $.ajax({
                    url:'save_book',
                    type:'post',
                    cache:false,
                    data: $('#form1').serialize(),
                    dataType:'json',
                    success:function (rst) {
                        if(rst.code==1){
                            bootoast({
                                message:rst.msg,
                                type:'success',
                                position:'top',
                                timeout:2
                            });
                            //清空页面
                            $('#bookName').val('');
                            $('#bookType').val('-1');
                            $('#author').val('');
                            $('#publish').val('');
                            $('#price').val('');
                            $('#storages').val('');
                        }else {
                            bootoast({
                                message:rst.msg,
                                type:'danger',
                                position:'top',
                                timeout:2
                            });
                        }
                    }
                });
            });
        });

        function vaildInput(){
            var bookName = $('#bookName').val();
            var bookType = $('#bookType').val();
            var author = $('#author').val();
            var publish = $('#publish').val();
            var price = $('#price').val();
            var storages = $('#storages').val();

            if(bookName == ''){
                bootoast({
                    message:'图书名不能为空',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(bookType == '-1'){
                bootoast({
                    message:'图书类型必须选择',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(author == ''){
                bootoast({
                    message:'图书必须有作者',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(publish == ''){
                bootoast({
                    message:'出版社不能为空',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(price == ''){
                bootoast({
                    message:'价格不能为空',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(parseFloat(price) <= 0){
                bootoast({
                    message:'价格不合理',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(storages == ''){
                bootoast({
                    message:'库存不能为空',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }

            if(parseInt(storages) < 0){
                bootoast({
                    message:'库存量不合理',
                    type:'danger',
                    position:'top',
                    timeout:2
                });
                return false
            }
            return true;
        }

    </script>
</head>
<body>
    <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">图书管理</a></li>
        <li>添加图书</li>
    </ul>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-11">
                <form class="form-horizontal" id="form1">
                    <div class="form-group">
                        <label for="bookName" class="col-sm-2 control-label">图书名称</label>
                        <div class="col-sm-4">
                            <input type="text" name="bookName" id="bookName" class="form-control">
                        </div>

                        <label for="bookType" class="col-sm-2 control-label">图书类型</label>
                        <div class="col-sm-4">
                            <select name="typeId" id="bookType" class="form-control">
                                <option value="-1">请选择类型</option>
                                <option value="1">文学类</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group"> 
                        <label for="author" class="col-sm-2 control-label">作      者</label>
                        <div class="col-sm-4">
                            <input type="text" name="author" id="author" class="form-control">
                            <div class="help-block">多个作者之间用逗号分隔</div>
                        </div>

                        <label for="publish" class="col-sm-2 control-label">出  版  社</label>
                        <div class="col-sm-4">
                            <input type="text" name="publish" id="publish" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">价     格</label>
                        <div class="col-sm-4">
                            <input type="number" name="price" id="price" class="form-control">
                        </div>

                        <label for="storages" class="col-sm-2 control-label">库  存  量</label>
                        <div class="col-sm-4">
                            <input type="text" name="storages" id="storages" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="desc" class="col-sm-2 control-label">图书描述</label>
                        <div class="col-sm-10">
                            <textarea name="depict" id="desc" rows="4" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-group text-center">
                        <input type="button" value="添   加" id="btnAdd" class="btn btn-primary">
                        <input type="reset" value="取   消" class="btn btn-default">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>